[해결] 크롬 114 버전에서 popover API 때문에 editor.js, ionic 등등의 라이브러리들에서 UI 깨지는 문제
크롬 114 버전부터 popover API 라는걸 지원하게 되었습니다. Popover API는 웹 개발자가 웹 페이지에 popover 위젯을 추가할 수 있도록 하는 Web API입니다. popover는 사용자가 웹 요소에 마우스를 가져갈 때 나타나는 작은 텍스트 콘텐츠 블록입니다. Popover API를 사용하면 popover의 위치, 크기 및 콘텐츠를 제어할 수 있습니다. 그런데 문제는 기존 라이브러리 소스들 중에 popover라는 태그 속성을 쓰는 라이브러리들과 이름이 충돌하는 바람에 UI가 깨지는 현상들이 발생하고 있습니다. 아래 이슈들을 보면 해당 문제들을 보실 수 있습니다. https://support.google.com/chrome/thread/218644651/bug-after-updating-google-chrome-to-version-114-0-5735-90?hl=en https://github.com/flaming-cl/editorjs-text-color-plugin/issues/21 이 문제를 해결하려면, 사이트에서 공통으로 사용하는 css에 아래와 같은 코드를 추가해주어야 합니다. [popover] { display: initial; position: initial; margin: initial; border: initial; background: initial; padding: initial; width: initial; height: initial; overflow: initial; inset: initial; color: initial; }